<?php get_header() ?>
<?php
    global $wpdb;
    $user = $wpdb->get_row("SELECT * FROM ap_painting_user WHERE user_id = {$_SESSION['user_id']}");
	$totalimg = $wpdb->get_row("SELECT * FROM $tb WHERE user_id = $user_id");
    ?>
<script type="text/javascript" src="<?php echo bloginfo('template_url'); ?>/js/jquery.blockUI.js"></script>
<script type="text/javascript" src="<?php echo bloginfo('template_url'); ?>/js/kinetic-v4.6.0.min.js"></script>
<script type="text/javascript" src="<?php echo bloginfo('template_url'); ?>/js/jquery.jcarousel.js"></script>
<script type="text/javascript" src="<?php echo bloginfo('template_url'); ?>/js/shape.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo bloginfo('template_url'); ?>/css/skins/tango/skin.css" />
<script type="text/javascript" src="<?php echo bloginfo('template_url'); ?>/js/jqdialog/jqdialog.min.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo bloginfo('template_url'); ?>/js/jqdialog/jqdialog.css"/>
<script type="text/javascript">

/* facebook share */
window.fbAsyncInit = function() {
 FB.init({appId: "167870453400890", status: true, cookie: true});
  // *** here is my code ***
  /*  if (typeof facebookInit == 'function') {
        facebookInit();
    } */
};

(function(d){
   var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
   if (d.getElementById(id)) {return;}
   js = d.createElement('script'); js.id = id; js.async = true;
   js.src = '//connect.facebook.net/en_US/all.js';
   ref.parentNode.insertBefore(js, ref);
 }(document));
 
 

/* END FB SHARE */

    function switchgalery($k) {
        jQuery('.gallery').hide();
        jQuery('#exam_' + $k).fadeIn();
    }

    function loadfimg($albumid) {
        $.blockUI({css: {
                border: 'none',
                padding: '15px',
                backgroundColor: '#000',
                '-webkit-border-radius': '10px',
                '-moz-border-radius': '10px',
                opacity: .5,
                color: '#fff'
            }});
        jQuery.post("<?php echo site_url('/') ?>exam/?detail=" + $albumid, function($data) {
            jQuery('#albumfuck').html($data);
            if (jQuery('#ftoolbarx').css('bottom') === '0px') {
                jQuery('#color_selector').css('z-index', '-9999')
                $("#ftoolbarx").animate({
                    bottom: "-=73",
                }, 500, function() {

                    jQuery('.folderimage .down').hide();
                    jQuery('.folderimage .up').show();
                });
            }
			folderflag = false; // disable folder button 
            $.unblockUI();
            function loadfimg($albumid) {
                jQuery.post("<?php echo site_url('/') ?>exam/?detail=" + $albumid, function($data) {
                    jQuery('#albumfuck').html($data);

                });
            }
        });
    }
</script>
<?php
global $wpdb;
$user_id = $_SESSION['user_id'];
$totalimg = $wpdb->get_results("SELECT * FROM ap_painting_exam WHERE user_id = {$user_id}");
?>
<div class="content tranhtai" >
    <div class="mainimg"> 
         <!--[if IE]><script type="text/javascript" src="<?php echo bloginfo('template_url'); ?>/js/excanvas.js"></script><![endif]-->
        <script type="text/javascript" src="<?php echo bloginfo('template_url'); ?>/js/html5-canvas-drawing-app.js"></script>
       
        <div id="albumfuck" >
			<div class="imgabc" style=" height: 500px;    overflow-x: hidden; overflow-y: scroll;"><img style="width: 700px; height: 2715px; max-height: 2715px;" src="<?php echo bloginfo('template_url'); ?>/tranh_tai.jpg" /></div>
		</div>

        <!--- CHO NAY DE VE LUNG TUNG --> 

        <div id="canvasDiv" style="display: none;"></div>
        <div id="canvasDiv2" style="display: none;"></div>
        <script type="text/javascript" src="<?php echo bloginfo('template_url'); ?>/js/shape.js"></script>
        <script type="text/javascript">
            jQuery(document).ready(function() {
                prepareCanvas();
                curTool = "open";
                outlineImage.src = base_url + "images/watermelon-duck-outline.png";
                $('#canvas').css('cursor', 'default');

            });
        </script>
        <script type="text/javascript">
            var editing = false;
            var iszoom = false;
            var editne = false;
			var  folderflag = true;
            var toolImg = [
                '<?php echo bloginfo('template_url'); ?>/img/icon_debai.png',
                '<?php echo bloginfo('template_url'); ?>/img/ico_shape.png',
                '<?php echo bloginfo('template_url'); ?>/img/icon_pencil.png',
                '<?php echo bloginfo('template_url'); ?>/img/brush.png',
                '<?php echo bloginfo('template_url'); ?>/img/thungson.png',
            ];
            var toolChoose = curChoose = 0;


            $('.arw-left').live('click', function() {
                if(toolChoose===1) switch_layer();
                if ($('.ico-zoom').hasClass('is-zoom')) toolChoose = curChoose;
                toolChoose = toolChoose - 1;
                if (toolChoose === 0) {
                    jQuery('.toolbar').hide();
                    jQuery('div#color_selector').addClass('hidden');
                    jQuery('.toolbar3').show();
                    jQuery('.lefticon').show();
                    jQuery('.lefticon2').hide();
                    $('#canvasDiv2').css('display','none');

                } else if(toolChoose === 1){
                    doactive2(null);
                    jQuery('.lefticon').hide();
                    jQuery('.lefticon2').show();
                    jQuery('.toolbar3').hide();
                    jQuery('.toolbar').show();
                    jQuery('div#color_selector').removeClass('hidden');
                    if(iszoom==true){
                        $('.ico-zoom').parent().click();
                    }
                } else {
                    $('#canvasDiv2').css('display','none');
                    jQuery('.lefticon').show();
                    jQuery('.lefticon2').hide();
                    jQuery('.toolbar3').hide();
                    jQuery('.toolbar').show();
                    jQuery('div#color_selector').removeClass('hidden');
                    if (toolChoose === -1)
                        toolChoose = 4;

                }
                $('.centerel img').attr('src', toolImg[toolChoose]);
                changeTool(toolChoose);
            });
            $('.arw-right').live('click', function() {
                if(toolChoose===1) switch_layer();
                if ($('.ico-zoom').hasClass('is-zoom')) toolChoose = curChoose;
                toolChoose = toolChoose + 1;

                if (toolChoose === 5) {
                    jQuery('.toolbar').hide();
                    jQuery('.toolbar3').show();
                     jQuery('.lefticon').show();
                    jQuery('.lefticon2').hide();
                    jQuery('div#color_selector').addClass('hidden');
                    if (toolChoose === 5)
                        toolChoose = 0;
                }else if(toolChoose === 1){
                    doactive2($('.shape-tron').parent());
                    jQuery('.lefticon').hide();
                    jQuery('.lefticon2').show();
                    jQuery('.toolbar3').hide();
                    jQuery('.toolbar').show();
                    jQuery('div#color_selector').removeClass('hidden');
                    if(iszoom==true){
                        $('.ico-zoom').parent().click();
                    }
                } else {
                    jQuery('.lefticon').show();
                    jQuery('.lefticon2').hide();
                    jQuery('.toolbar3').hide();
                    jQuery('.toolbar').show();
                    jQuery('div#color_selector').removeClass('hidden');
                }
                $('.centerel img').attr('src', toolImg[toolChoose]);
                changeTool(toolChoose);
            });

            $('.toolbar img').live('click', function() {

                if (!$(this).hasClass('ico-zoom')) {
                    $('.toolbar img').removeClass('active');
                    $(this).addClass('active');
                    if (curTool === 'eraser') {
                        $('#canvas').css('cursor', 'url(<?php echo bloginfo('template_url'); ?>/img/ico-ease.png) 0 12, default');

                    } else {
                        toolChoose = curChoose;
                        changeTool(toolChoose);
                    }
                } else {
                    $(this).toggleClass('is-zoom');
                }
            });

            $('.centerel img').live('click', function() {
                toolChoose = curChoose;
                changeTool(toolChoose);
            });
            function changeTool(toolChoose) {
                $('.toolbar img').removeClass('active');
                jQuery('.toolbar li').removeClass('active');
                $('.centerel img').addClass('active');
                $('.ico-eraser').removeClass('is-eraser');
                if ($('.ico-zoom').hasClass('is-zoom') && !iszoom) {
                    zoomIn = false;
                    $('.ico-zoom').attr('src', '<?php echo bloginfo('template_url'); ?>/img/icon_zoom.png');
                }
                if (toolChoose == 0) { // Open
                    curTool = "open";
                    $('#canvas').css('cursor', 'default');
                }
                if (toolChoose == 1) { // Shape
                    curTool = "shape";
                    $('#canvas').css('cursor', 'default');
                    $('#canvasDiv2').css('display','');
                }
                if (toolChoose == 2) { // Pencil
                    curTool = "marker";
                    $('#canvas').css('cursor', 'url(<?php echo bloginfo('template_url'); ?>/img/ico-pencil.png) 0 12, default');
                }
                if (toolChoose == 3) { // Brush
                    curTool = "crayon";
                    $('#canvas').css('cursor', 'url(<?php echo bloginfo('template_url'); ?>/img/ico-brush.png) 0 12, default');
                }
                if (toolChoose == 4) { // Fill
                    curTool = "flood";
                    $('#canvas').css('cursor', 'url(<?php echo bloginfo('template_url'); ?>/img/ico-thungson.png) 14 9, default');
                }

                curChoose = toolChoose;

            }
            function convertHex(hex) {
                hex = hex.replace('#', '');
                _r = parseInt(hex.substring(0, 2), 16);
                _g = parseInt(hex.substring(2, 4), 16);
                _b = parseInt(hex.substring(4, 6), 16);

                result = {
                    r: _r,
                    g: _g,
                    b: _b
                }
                return result;
            }
            function undo()
            {
                if ($('.ico-zoom').hasClass('is-zoom') && !iszoom) {
                    zoomIn = false;
                    $('.ico-zoom').attr('src', '<?php echo bloginfo('template_url'); ?>/img/icon_zoom.png');
                }
                if (history.length > 0)
                    colorLayerData = history.pop();
                redraw();
            }
            function zoomImage() {
                $('.toolbar img').removeClass('active');
                $('#canvas').css('cursor', 'url(<?php echo bloginfo('template_url'); ?>/img/ico-zoom.png) 0 12, default');
                if (toolChoose != -1)
                    curChoose = toolChoose;
                toolChoose = -1;
                if (!zoomIn) {
                    zoomIn = true;
                    $('.ico-zoom').attr('src', '<?php echo bloginfo('template_url'); ?>/img/icon_zoom_out.png');
                } else {
                    zoomIn = false;
                    iszoom = false;
                    $('.ico-zoom').attr('src', '<?php echo bloginfo('template_url'); ?>/img/icon_zoom.png');
                }
                if ($('.ico-zoom').hasClass('is-zoom')) {
                    $('.centerel img').click();
                    redraw();
                }
            }

            function eraser() {
                curTool = 'eraser';
                curChoose = toolChoose;
                $('.ico-eraser').toggleClass('is-eraser');
                if (!$('.ico-eraser').hasClass('is-eraser')) {
                    $('.centerel img').click();
                }
            }

            function fbshare() {

                if (editing) {
                    $.jqDialog.alert("Bé phải lưu hình ảnh này lại! ", function() {
                    });
                } else {
						url = jQuery('#latestimg').html();
						FB.ui({
						  method: 'feed',
						  link: 'https://www.facebook.com/CreamOvn',
						  picture: url,
						  name: 'Họa Sĩ Nhí Tài Năng',
						  caption: '<?php echo $user->name ?>',
						  description: ' Tham gia cùng Cream-O để có cơ hội nhận thật nhiều quà tặng nào!'
						}, function(response){});
                }
            }


            function loadexam() {

                if (jQuery('#albumfuck').css('display') === 'none' || jQuery('#albumfuck > div').hasClass( "imgabc" ) ) {
                    jQuery('#canvasDiv').hide();
                    jQuery.post('<?php echo site_url() ?>/exam', function($data) {
                        jQuery('#albumfuck').html($data);
                        jQuery('#albumfuck').fadeIn();
                        outcanvas = true;
                        jQuery('#lialbum').addClass('active');
                    });

                } else {
                    jQuery('#albumfuck').hide();
					
					$('#canvas').remove();
					editing = false;
					prepareCanvas();
					outlineImage.src = base_url + "images/watermelon-duck-outline.png";
					$('.centerel img').click();
					$.unblockUI();
                }
            }

            function doactive(ele) {
                currele = jQuery(ele).parent();
                if (currele.hasClass('active')) {
                    currele.removeClass('active');
                } else {
                    jQuery('.lefticon').removeClass('active');
                    currele.addClass('active');
                }
            }

             function doactive2(ele) {
                insert_image = false;
                if(ele==null){
                    jQuery('.lefticon2').each(function(){
                        each_img = jQuery(this).find('img');
                        each_img.attr('src','<?php echo bloginfo('template_url'); ?>/img/'+each_img.attr('class')+'.png');
                    });
                    jQuery('.lefticon2').removeClass('active2');
                    mode_shape = '';
                    return;
                }
                currele = jQuery(ele).parent();
                img_var = jQuery(ele).find('img').attr('class');
                img = jQuery(ele).find('img');
                if (currele.hasClass('active2')) {
                    currele.removeClass('active2');
                    img.attr('src','<?php echo bloginfo('template_url'); ?>/img/'+img_var+'.png');
                    mode_shape = '';
                } else {
                    jQuery('.lefticon2').removeClass('active2');
                    currele.addClass('active2');
                    jQuery('.lefticon2').each(function(){
                        if(jQuery(this).hasClass('active2')){
                            img.attr('src','<?php echo bloginfo('template_url'); ?>/img/'+img_var+'-active.png');
                            mode_shape = img_var;
                            if(mode_shape!='shape-chenhinh') current_tool_shape = mode_shape;
                        }else{
                            each_img = jQuery(this).find('img');
                            each_img.attr('src','<?php echo bloginfo('template_url'); ?>/img/'+each_img.attr('class')+'.png');
                        }
                    });
                }
            }

            function doactive3(ele) {
                insert_image = false;
                if(ele==null){
                    jQuery('.lefticon2').each(function(){
                        each_img = jQuery(this).find('img');
                        each_img.attr('src','<?php echo bloginfo('template_url'); ?>/img/'+each_img.attr('class')+'.png');
                    });
                    jQuery('.lefticon2').removeClass('active2');
                    mode_shape = '';
                    return;
                }
                currele = jQuery(ele).parent();
                img_var = jQuery(ele).find('img').attr('class');
                if(img_var=='shape-khac'&&currele.hasClass('active2')) {
                    img_var = 'shape-khac2';
                    jQuery(ele).find('img').attr('class',img_var);
                    currele.find('label').html('Tim');
                }
                else if(img_var=='shape-khac2'&&currele.hasClass('active2')) {
                    img_var = 'shape-khac';
                    jQuery(ele).find('img').attr('class',img_var);
                    currele.find('label').html('Sao');
                }

                jQuery('.lefticon2').removeClass('active2');
                currele.addClass('active2');
                jQuery('.lefticon2').each(function(){
                    if(jQuery(this).hasClass('active2')){
                        jQuery(this).find('img').attr('src','<?php echo bloginfo('template_url'); ?>/img/'+img_var+'-active.png');
                        mode_shape = img_var;
                    }else{
                        each_img = jQuery(this).find('img');
                        each_img.attr('src','<?php echo bloginfo('template_url'); ?>/img/'+each_img.attr('class')+'.png');
                    }
                });
            }
        </script>
        <script src="<?php echo bloginfo('template_url'); ?>/js/colorpicker/jquery.colorPicker.js" type="text/javascript"></script>
        <link rel="stylesheet" href="<?php echo bloginfo('template_url'); ?>/js/colorpicker/colorPicker.css" type="text/css" />

    </div>
</div>
<!-- tool bar --> 
<div id="ftoolbarx" style="bottom: 0; position: absolute;">

    <!-- tool bar --> 
    <div class="toolbar">
        <ul>
            <li id="liundo" class="lefticon" onclck="jQuery('#liundo').addClass('active');"><label onclick="jQuery('#liundo').addClass('active');">Undo</label><a href="javascript:void(0);" onclick="undo();
                jQuery('#liundo').addClass('active');"><img src="<?php echo bloginfo('template_url'); ?>/img/icon_back.png"></a></li>
            <li class="lefticon"><label>Zoom</label><a href="javascript:;" onclick="zoomImage();
                doactive(this);"><img class="ico-zoom" src="<?php echo bloginfo('template_url'); ?>/img/icon_zoom.png"></a></li>
            <li class="lefticon"><label>Eraser</label><a href="javascript:;" onclick="eraser();
                doactive(this);"><img class="ico-eraser" src="<?php echo bloginfo('template_url'); ?>/img/icon_ease.png"></a></li>
            <li id="lialbum" class="lefticon" ><label>Bài thi</label><a href="javascript:void(0)" onclick="loadexam();
                                                                      "><img src="<?php echo bloginfo('template_url'); ?>/img/icon_book.png"></a></li>
            <li class="lefticon"><label>Save</label><a href="javascript:;" onclick="saveImage();
                doactive(this);"><img src="<?php echo bloginfo('template_url'); ?>/img/icon_save.png"></a></li>
            <li class="lefticon"><label>Share</label><a href="javascript:void(0)" onclick="fbshare();
                doactive(this);"><img src="<?php echo bloginfo('template_url'); ?>/img/icon_fb.png"></a></li>
            
            <!-- SHAPE ICON -->
            <li class="lefticon2"><label>Tròn</label><a href="javascript:;" onclick="
                doactive2(this);"><img class="shape-tron" src="<?php echo bloginfo('template_url'); ?>/img/shape-tron.png"></a></li>
                <li class="lefticon2"><label>Vuông</label><a href="javascript:;" onclick="
                doactive2(this);"><img class="shape-vuong" src="<?php echo bloginfo('template_url'); ?>/img/shape-vuong.png"></a></li>
                <li class="lefticon2"><label>Bo góc</label><a href="javascript:;" onclick="
                doactive2(this);"><img class="shape-bogoc" src="<?php echo bloginfo('template_url'); ?>/img/shape-bogoc.png"></a></li>
                <li class="lefticon2"><label>Sao</label><a href="javascript:;" onclick="
                doactive3(this);"><img class="shape-khac" src="<?php echo bloginfo('template_url'); ?>/img/shape-khac.png"></a></li>
                <li class="lefticon2"><label>Chèn</label><a href="javascript:;" onclick="
                doactive2(this);doactive2(this);$('#uploadimage').click();"><img class="shape-chenhinh" src="<?php echo bloginfo('template_url'); ?>/img/shape-chenhinh.png"></a></li>
                <form style="display:none;" id="shape_form"><input type='file' name='img' size='65' id='uploadimage' style="display:none;" /></form>
                <script type="text/javascript">
                function draw(ev) {
                    insert_image = true;
                    var img = new Image(),
                    f = document.getElementById("uploadimage").files[0],
                    url = window.URL || window.webkitURL,
                    src = url.createObjectURL(f);

                    img.src = src;
                    img.onload = function() {
                        draw_insert_image(img);
                        url.revokeObjectURL(src);
                        document.getElementById('shape_form').reset();
                    }
                }
                document.getElementById("uploadimage").addEventListener("change", draw, false);
                </script>
            <!-- END SHAPE ICON -->

            <li class="centerel"><span class="arw-left"></span><img src="<?php echo bloginfo('template_url'); ?>/img/icon_debai.png"><span class="arw-right"></span></li>
            <li id="colorpickx">
                <div id="radius-tool"><div id="slider-range-max"></div></div>
                <link href="<?php echo bloginfo('template_url'); ?>/css/jquery-ui.css" type="text/css" rel="stylesheet" />
                <script>
            $(function() {
                $("#slider-range-max").slider({
                    range: "max",
                    min: 1,
                    max: 10,
                    value: 1,
                    slide: function(event, ui) {
                        radius = ui.value * 2;
                        if(choose_shape!='' && curTool=='shape'){
                            var shape = layer.get('.'+choose_shape)[0];
                            shape.setStrokeWidth(radius);
                            layer.draw();
                        }
                    }
                });
            });
            function saveImage() {
                // confirm dialog
                $.jqDialog.confirm("Bé có muốn lưu hình đang vẽ lại ?",
                        function() {
                            result = true;
                            if (result === true) {
                                var dataURL = canvas.toDataURL("image/png");
                                $.blockUI({css: {
                                        border: 'none',
                                        padding: '15px',
                                        backgroundColor: '#000',
                                        '-webkit-border-radius': '10px',
                                        '-moz-border-radius': '10px',
                                        opacity: .5,
                                        color: '#fff'
                                    }});
                                $.ajax({
                                    type: "POST",
                                    url: "<?php echo site_url() ?>/save-exam",
                                    data: {
                                        imgBase64: dataURL
                                    }
                                }).done(function(url) {

                                    jQuery('#latestimg').html(url);

                                    $.unblockUI();

                                    editing = false;
                                });
                            }
                        }, // callback function for 'YES' button
                        function() {}      // callback function for 'NO' button
                );

            }
                </script>
                <input id="color" type="text" name="color" value="#000000" />
                <script type="text/javascript">
                // $( document ).ready(function(){
                    $.fn.colorPicker.defaultColors = [
                        'ffffff', 'e9e9e9', 'c0c0c0',
                        'fdf78c', 'ffea01', 'bbbe01',
                        'f5e200', 'f0c101', 'a38001',
                        'fd9524', 'f2651e', 'b73902',
                        'fca2ae', 'ff7688', 'e8334e',
                        'fe64d9', 'f325c7', 'c7009b',
                        'f7524c', 'df1710', 'b01700',
                        '99cc53', '7eb130', '40760b',
                        '01a368', '017755', '004733',
                        '08b9ff', '0286c6', '005189',
                        'b638eb', '7811a1', '4a015b',
                        '0047ac', '07316d', '01143c',
                        '966d6c', '674140', '422928',
                        '3f3d3e', '1f1f1f', '000000'
                    ];
                    $('#color').colorPicker();
                    $('#color_selector > div.color_swatch').last().addClass('active');
                    $('.color_picker').click();
                    $('.color_swatch').live('click', function() {
                        $('.color_swatch').removeClass('active');
                        $(this).addClass('active');
                    });

                    $('#color').change(function() {
                        shapeColor = $(this).val();
                        if(choose_shape!='' && curTool=='shape'){
                            var shape = layer.get('.'+choose_shape)[0];
                            shape.setFill(shapeColor);
                            layer.draw();
                        }
                        curColor = convertHex($(this).val());
                        $('.centerel img').click();
                    });
                // });
                </script>
                <style type="text/css">
                    #color_selector{
                        display: block !important;
                        z-index: 1600;
                        margin-left: 15px;
                        background-color: white !important;
                        margin-top: -30px;
                    }
                    .color_picker{
                        display: none;
                    }
                    div.color_swatch{
                        border-color: transparent !important;
                        height: 30px;
                        width: 4px;
                        margin:0;
                        -webkit-transition-duration: 0.2s;
                        -moz-transition-duration: 0.2s;
                        -o-transition-duration: 0.2s;
                    }
                    .color_swatch.active, .color_swatch:hover{
                        height: 36px;
                        margin-top: -3px;
                    }
                    div#color_selector {
                        background-color: transparent !important;
                        border: medium none;
                        height: 23px;
                        padding: 2px;
                        position: relative;
                        top: 44px !important;
                        width: 252px;
                        left: auto !important;
                        margin-left: 500px;
                    }
                    #color_custom{
                        display: none;
                    }
                    #slider-range-max{
                        margin-top: -28px;
                        width: 210px;
                        height: 5px;
                        margin-left: 40px;
                    }
                    .ui-slider .ui-slider-handle {
                        width: 0.8em;
                        height: 0.8em;
                    }
                    #addimg{
                        z-index: 1600;
                    }
                    /* Let's get this party started */
                    ::-webkit-scrollbar {
                        width: 8px;
                        height: 8px;
                    }

                    /* Track */
                    ::-webkit-scrollbar-track {
                        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
                        -webkit-border-radius: 8px;
                        border-radius: 8px;
                    }

                    /* Handle */
                    ::-webkit-scrollbar-thumb {
                        -webkit-border-radius: 8px;
                        border-radius: 8px;
                        background: rgba(255,0,0,0.8); 
                        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
                    }
                    ::-webkit-scrollbar-thumb:window-inactive {
                        background: rgba(255,0,0,0.4); 
                    }
                    ::-webkit-scrollbar-corner {
                        background: transparent;
                    }
                </style>
            </li>
        </ul>
        <div id="xbutton" class="folderimage">
            <img class="down" src="<?php echo bloginfo('template_url'); ?>/img/topbt.png" alt="" />
            <img class="up"  style="display: none" src="<?php echo bloginfo('template_url'); ?>/img/topbt_2.png" alt="" />
        </div>
    </div>

    <div class="toolbar3" >


        <ul>

            <li class="lefttangox" style="padding: 30px 19px 10px 21px; ">
                Gia đình hạnh phúc tại Cream-O xứ sở vui nhộn
            </li>
            <li class="centerel"><span class="arw-left"></span><img src="<?php echo bloginfo('template_url'); ?>/img/icon_debai.png"><span class="arw-right"></span></li>
            <li class="righttangox" style="padding: 29px 10px 10px; ">
               Xứ sở Cream-O trong tưởng tượng của bé
            </li>
        </ul>
        <div id="xbutton" class="folderimage">
            <img class="down" src="<?php echo bloginfo('template_url'); ?>/img/topbt.png" alt="" />
            <img class="up"  style="display: none" src="<?php echo bloginfo('template_url'); ?>/img/topbt_2.png" alt="" />
        </div>

    </div>

</div>
<script type="text/javascript">

    jQuery(document).ready(function() {
        jQuery('#mycarousel').jcarousel({
            wrap: 'circular',
            scroll: 1,
            start: 1
        });
        jQuery('#mycarousel2').jcarousel({
            wrap: 'circular',
            scroll: 1,
            start: 5
        });

        jQuery('.righttango .jcarousel-next-horizontal').click(function() {
            jQuery('.lefttango .jcarousel-next-horizontal').click()
        });
        jQuery('.lefttango .jcarousel-prev-horizontal').click(function() {
            jQuery('.righttango .jcarousel-prev-horizontal').click()
        });

        jQuery('.folderimage').click(function() {
           if(!folderflag) return false; 
		   if (jQuery('#ftoolbarx').css('bottom') === '0px') {
                jQuery('#color_selector').css('z-index', '-9999')
                $("#ftoolbarx").animate({
                    bottom: "-=73",
                }, 500, function() {

                    jQuery('.folderimage .down').hide();
                    jQuery('.folderimage .up').show();
                });
            } else {
                $("#ftoolbarx").animate({
                    bottom: "+=73",
                }, 500, function() {
                    jQuery('#color_selector').css('z-index', '1')
                    jQuery('.folderimage .up').hide();
                    jQuery('.folderimage .down').show();
                });
            }
        });

        jQuery('.toolbar li').click(function() {
            jQuery('.toolbar li').removeClass('active');
            if (!$(this).find('img').hasClass('is-zoom')) {
                jQuery(this).addClass('active');
            }
        });

        jQuery('.toolbar').hide();
        jQuery('div#color_selector').addClass('hidden');

        jQuery('#debaiicon').click(function() {
<?php if (count($totalimg) < 2) { ?>
                jQuery('.toolbar3').hide();
                jQuery('.toolbar2').fadeIn();
<?php } else { ?>

                // document.location.href = "<?php echo site_url() ?>/exam";

<?php } ?>

        });

        jQuery('#addimg').click(function() {
			folderflag = true;
			<?php if(count($totalimg) < 5){ ?>
            if (editing) {

                var currele = jQuery(this);
                // confirm dialog
                $.jqDialog.confirm("Bé có lưu hình đang vẽ lại ?",
                        function() {
                            result = true;
                            if (result === true) {
                                var dataURL = canvas.toDataURL("image/png");
                                $.blockUI({css: {
                                        border: 'none',
                                        padding: '15px',
                                        backgroundColor: '#000',
                                        '-webkit-border-radius': '10px',
                                        '-moz-border-radius': '10px',
                                        opacity: .5,
                                        color: '#fff'
                                    }});
                                $.ajax({
                                    type: "POST",
                                    url: "<?php echo site_url() ?>/save-exam",
                                    data: {
                                        imgBase64: dataURL
                                    }
                                }).done(function(url) {
                                    jQuery('#latestimg').html(url);
                                    editing = false;
                                    $.unblockUI();
                                    $('#canvas').remove();
                                    prepareCanvas();
                                    outlineImage.src = base_url + "images/watermelon-duck-outline.png";
                                    $('.centerel img').click();
                                });
                            }
                        }, // callback function for 'YES' button
                        function() {
                            $('#canvas').remove();
                            editing = false;
                            prepareCanvas();
                            outlineImage.src = base_url + "images/watermelon-duck-outline.png";
                            $('.centerel img').click();
                        }      // callback function for 'NO' button
                );
            } else {
                $('#canvas').remove();
                editing = false;
                prepareCanvas();
                outlineImage.src = base_url + "images/watermelon-duck-outline.png";
                $('.centerel img').click();
            }
            jQuery('#albumfuck').hide();
            zoomIn = false;
            $('.ico-zoom').removeClass('is-zoom');
            $('.ico-zoom').attr('src', '<?php echo bloginfo('template_url'); ?>/img/icon_zoom.png');
			<?php }else{ ?>
			 jQuery('#albumfuck').html('<h3 class="fullimg">Số bài dự thi của bé đã đủ ! </h3>');
			<?php } ?>
        });
    });
//	jQuery(document).ready(function(){jQuery('#addimg').click()});
</script>
<div id="latestimg" style="display: none"></div>
<?php get_footer() ?>